<script>
export default {
    name: 'TableCreator',
    props: {
        colsConfig: {
            type: Array,
            required: true
        },
        tableConfig: {
            type: Object,
            default: () => ({})
        }
    },
    methods: {
        renderColumn(col) {
            let scopedSlots;
            let { prop, label, width, align, sortable } = col;
            let slots = this.$scopedSlots[col.prop];
            if (slots) {
                scopedSlots = {
                    default: props => {
                        return slots(props)
                    }
                }
            }
            return <el-table-column
                prop={prop}
                label={label}
                width={width}
                align={align}
                sortable={sortable}
                scopedSlots={scopedSlots}
            >
            </el-table-column>
        }
    },
    render() {
        const { colsConfig, $attrs, $listeners } = this;
        return (
            <div>
                <el-table attrs={{ ...$attrs }} {...{ on: $listeners }}>
                    {colsConfig && colsConfig.map(col => {
                        return this.renderColumn(col);
                    })}
                </el-table>
            </div>
        )
    }
}
</script>
<style scoped></style>